<script setup>
import { ref,inject,computed,defineProps ,defineEmits} from 'vue'
//props 是单向数据流,不可以修改props.modelValue
const props = defineProps({
  modelValue:{
    type:Array,
    required:true
  }
})
console.log(props)
// 通过defineEmits宏定义事件
const emits = defineEmits(['update:modelValue'])  
const removeAll = () => {  
  emits('update:modelValue', []) // 传递一个空数组作为参数  
}
//已办事项
const doneCount = computed(() => props.modelValue.filter(todo=> todo.done).length)
//全选
const isAll = computed({  
get() {  
  return props.modelValue.every(todo=> todo.done);  
},  
set(value) {  
  props.modelValue.forEach(todo => {  
    todo.done = value;  
  });  
} 
});  

const toggleAll = ()=>{
  isAll.value = !isAll.value;  
}

//清除已经办理
const removedone = () => {  
const filteredTodos = props.modelValue.filter(todo => !todo.done)  
// 通知父组件更新 modelValue  
emits('update:modelValue', filteredTodos)  
}  



/* 第二种：注入依赖实现 */

/* const todos = inject("todos");
console.log(todos)
//全选
const isAll = computed({  
get() {  
  return todos.value.every(todo=> todo.done);  
},  
set(value) {  
  todos.value.forEach(todo => {  
    todo.done = value;  
  });  
} 
});  

const toggleAll = ()=>{
  isAll.value = !isAll.value;  
}
   */
</script>

<template>
    <footer class="todo-footer" v-if="props.modelValue.length !=0">
    <!-- 全选 -->
    <label class="check-all"  name="checkAll">
        <input type="checkbox" :checked="isAll" @change="toggleAll" name="checkAll">
        全选
    </label>
    <div>已办事项{{doneCount}}/全部事项{{ props.modelValue.length  }}</div>
    <button @click="removedone">清除已办</button>
    <button @click="removeAll">清除所有</button>
    
  </footer>
  <h1 v-else>暂无待办事项</h1>
</template>

<style scoped>
h1 {
  text-align: center;
  margin-top: 20px;
}
</style>